// 权限拦截实现步骤和思路
// 1. 由于权限拦截需要-判断要跳转的路由地址，因此需要路由守卫技术，引入路由
import router from '@/router'
// 引入vuex store 实例
import store from '@/store'
// 引入进度条插件
import Nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
// 路由前置守卫
// to 要跳转的目标地址
// from 代表的是从哪里跳过来
// next 代表是否放行，必须得调用，不然页面会卡死
// 定义白名单
const whiteList = ['/login', '/404'] // 白名单内的内容不受权限拦截的控制
router.beforeEach(async(to, from, next) => {
  Nprogress.start() // 开启进度条
  // 3. 判断是否有token
  if (store.getters.token) {
    // 判断是否跳转的是否是登录页，如果是直接跳转到首页
    if (to.path === '/login') {
      next('/')
    } else {
      // 如果有token 不是登录页则直接放行
      // 因为每个路由的地址切换都会经过路由守卫，为了防止多次触发获取用户资料的接口，需要判断，判断是否有用户资料，有则不用获取，没有则获取，通过用户id进行判断
      if (!store.getters.userId) {
        // 由于用户模块getUserInfo这个方法里面在调用接口将返回的结果return 出来了
        const { roles } = await store.dispatch('user/getUserInfo') // 等待获取用户资料后再执行next方法进行跳转
        // 在获取用户资料的方法后面触发actions里面的filterRoutes 的方法
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        console.log(routes, 'fjdn')
        // 如何动态的将获取的路由的信息添加到路由配置中
        // router.addRoutes(routes)
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 通过addRoutes方法添加到动态路由表中
        // 通过this.$router.option.routes方法获取不到路由信息
        // 添加完动态路由之后
        next(to.path) // 相当于跳到对应的地址，相当于多做一次跳转
      }
      next()
    }
  } else { // 如果没有token，首先判断跳转的页面是否在白名单，如果在白名单，则放行
    if (whiteList.indexOf(to.path) > -1) {
      next() // 大于-1代表的是在白名单内，直接放行
    } else { // 如果不在白名单内，且没有token, 则直接强制跳转到登录页
      next('/login')
    }
  }
  Nprogress.done() // 为了保证，在有token的时候跳转登录页又会重定向到主页，相当于路由地址没有变化，不会经过路由后置守卫，手动强制进行一次关闭进度条
})
// 在路由后置守卫关闭进度条， 路由后置守卫代表的是页面跳转成功之后执行的钩子函数，里面有两个参数to和from， 常用于；路由跳转后修改标题等逻辑
router.afterEach(() => {
  Nprogress.done() // 关闭进度条
})
